// This Source Code Form is subject to the terms of the Mozilla Public
// License, v. 2.0. If a copy of the MPL was not distributed with this
// file, You can obtain one at https://mozilla.org/MPL/2.0/.

@use '~@mozilla-protocol/core/protocol/css/includes/lib' as * with ($font-path: '/media/protocol/fonts', $image-path: '/media/protocol/img');
@use '~@mozilla-protocol/core/protocol/css/components/inline-list';
@use '~@mozilla-protocol/core/protocol/css/includes/fonts/metropolis';
@use '~@mozilla-protocol/core/protocol/css/includes/fonts/inter';
@use '~@mozilla-protocol/core/protocol/css/components/logos/wordmark';
@use '~@mozilla-protocol/core/protocol/css/components/logos/wordmark-product-vpn';
@use '~@mozilla-protocol/core/protocol/css/components/breadcrumb';
@use '../../cms/rich-text';

.resource-center-page-header {
    .mzp-l-content {
        max-width: $content-md;

        .mzp-c-callout-desc {
            font-weight: 700;
            margin-left: auto;
            margin-right: auto;
            max-width: $content-sm;
        }
    }
    @media #{$mq-md} {
        background-image: url('/media/img/products/vpn/resource-center/moz_resource_center_header_bg.svg');
        background-position: center;
        background-repeat: no-repeat;
        background-size: 90% 100%;
    }
    @media #{$mq-lg} {
        background-position: 45% $layout-xs;
        background-size: auto;
    }
}

.resource-center-hero {
    background-color: $color-white;
}

.resource-center-wordmark {
    margin: 0 auto $spacing-lg;

    @media #{$mq-md} {
        margin: 0 0 $spacing-xl;
    }

    // patch fix to center the word-mark. Similar to issue #10666
    @media screen and (max-width: #{$screen-md}) {
        background-position: top center;
    }
}

.resource-center-cta {
    margin-bottom: $spacing-md;
}

.resource-center-split-media .mzp-c-split-media-asset {
    // smaller image on small breakpoints
    max-width: 80%;

    @media #{$mq-md} {
        max-width: 100%;
    }
}

.resource-center-cta-title {
    margin-bottom: $spacing-2xl;
    @include text-title-md;
}

.resource-center-cta-desc {
    font-family: var(--body-font-family);
    @include text-body-sm;

    // this color will be added to protocol, this should be updated once its available as a token
    color: #666;
}

.vpn-article-container {
    background: url('/media/img/products/vpn/resource-center/resource_center_article_gradient.svg');
    background-repeat: no-repeat;
    background-size: auto;

    // The background image will cut off on larger viewports
    @media #{$mq-lg} {
        background-size: contain;
    }
}

.vpn-article {
    background-color: $color-white;
    box-sizing: border-box;
    padding: $layout-sm $layout-md;

    .vpn-article-category {
        background: $color-black;
        border-radius: $border-radius-sm;
        color: $color-white;
        display: inline-block;
        font-weight: 300;
        padding: $spacing-xs $spacing-md $spacing-xs $spacing-md;
        text-transform: uppercase;
        @include text-body-xs;
    }

    .vpn-article-date {
        align-items: center;
        display: flex;

        .date-icon {
            @include bidi(((margin-right, $spacing-sm, margin-left, $spacing-sm),));
        }
    }

    h3 {
        @include text-title-sm;
    }

    img {
        display: block;
        margin: 0 auto $spacing-lg;
    }
}

.vpn-article-bottom-title {
    margin-bottom: $spacing-xl;
}

.vpn-article-hr {
    margin: $spacing-xl 0;
}

.vpn-c-vote {
    margin-top: $layout-xl;
    text-align: center;

    .vpn-c-vote-btn-container {
        position: relative;
        @include bidi(((margin-right, $layout-lg, margin-left, $layout-lg),));

        .vpn-c-vote-btn {
            background: none;
            border: none;
            color: $color-moz-gray;
            cursor: pointer;
            fill: currentColor;
            height: $layout-sm + 6px;
            width: $layout-md - 6px;

            &.down {
                position: absolute;
                top: 13px;
                @include bidi(((margin-left, $spacing-sm, margin-right, $spacing-sm),));
            }

            &[aria-pressed='true'] {
                color: $color-blue-50;
                fill: currentColor;
            }

            span {
                @include visually-hidden;
            }

            svg,
            path {
                pointer-events: none;
            }
        }
    }
}
